<template>
  <!-- navbar -->
  <div class="navbar" id="aviation-detail-nav">
    <navPanel
      class="nav-panel"
      :activeId="navPanelActiveId"
      :data="navList"
      activeColor="#1677ff"
      @item-click="navPanelItemClick"
      lang
    />
  </div>
  <div class="card">
    <!-- 课程简介 -->
    <div class="nav-content">
      <div class="nav-content-item">
        <h2 class="title" v-if="navList[0].label" :id="navList[0].label">
          {{ $t(navList[0].label) }}
        </h2>
        <div class="title" v-else>
          <Skeleton pc></Skeleton>
        </div>
        <div class="teacher-list">
          <div class="teacher-item" v-if="loaded">
            <img
              src="~/assets/images/user-logo/default_logo.jpg"
              class="logo"
              v-if="data?.teacher?.single_pic"
              alt=""
            />
            <img
              v-else
              v-logo-error
              :src="data?.teacher?.single_pic"
              alt=""
              class="logo"
            />
            <div class="detail">
              <div class="name">{{ data.teacher.title }}</div>
              <div class="desc">{{ data.teacher.title2 }}</div>
            </div>
          </div>
          <template v-else>
            <div class="pc-skeleton">
              <div class="teacher-item">
                <Skeleton avatar width="56" height="56" radius="50%"></Skeleton>
                <div class="detail">
                  <div class="name">
                    <Skeleton
                      width="30%"
                      height="80px"
                      pc
                      gap-skeleton
                    ></Skeleton>
                  </div>
                  <div class="desc">
                    <Skeleton pc height="80px" width="100%"></Skeleton>
                  </div>
                </div>
              </div>
            </div>
            <div class="mobile-skeleton">
              <div class="teacher-item">
                <Skeleton
                  avatar
                  width="266px"
                  height="266px"
                  radius="50%"
                ></Skeleton>
                <div class="detail">
                  <div class="name">
                    <Skeleton width="40%" mobile gap-skeleton></Skeleton>
                  </div>
                  <div class="desc">
                    <Skeleton mobile width="100%"></Skeleton>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <template v-if="loaded">
          <div class="course-descri" v-if="data.descri">
            <div
              ref="courseDescriContentRef"
              class="content raw-html"
              v-html="data.descri"
            ></div>
          </div>
        </template>
        <template v-else>
          <div class="pc-skeleton">
            <Skeleton :rows="4"></Skeleton>
          </div>
          <div class="mobile-skeleton">
            <Skeleton :rows="6" mobile></Skeleton>
          </div>
        </template>
      </div>
    </div>
    <!-- 课程大纲 -->
    <div class="nav-content">
      <div class="nav-content-item">
        <h2 class="title" v-if="navList[1].label" :id="navList[1].label">
          {{ $t(navList[1].label) }}
        </h2>
        <div class="title" v-else>
          <Skeleton pc></Skeleton>
        </div>
        <div class="course-outline-list" v-if="loaded">
          <template v-for="(item, index) in data.list" :key="item.id">
            <div
              class="course-outline-item item-row"
              :class="[
                item.list2.length == 0 ? 'no-sub-list' : 'pointer',
                showCourseIndex[index] ? 'show' : '',
              ]"
              @click="showSubList(item, index)"
            >
              <div class="title">
                <span>
                  {{ item.title }}
                </span>
                <span class="mcq" v-if="item.select_title"
                  >【{{ item.select_title }}】</span
                >
              </div>
              <IconArrowDown
                class="collapse-svg"
                v-if="item.list2.length > 0"
              />
              <div v-else class="price">
                {{ item.price_symbol }}{{ item.price }}
              </div>
            </div>
            <div
              class="course-outline-sub-list-outer"
              v-if="item.list2.length > 0"
            >
              <div class="course-outline-sub-list">
                <div
                  v-for="sub_item in item.list2"
                  :key="sub_item.id"
                  class="course-outline-sub-list-item item-row"
                >
                  <div class="title">
                    <span>{{ sub_item.title }}</span>
                    <span class="mcq" v-if="sub_item.select_title"
                      >【{{ sub_item.select_title }}】</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 查看全部 -->
          <!-- <div class="show-all t-center">
            查看全部 <i class="iconfont icon-arrow-down"></i>
          </div> -->
        </div>
        <template v-else>
          <div class="pc-skeleton">
            <div v-for="i in 6" :key="i">
              <Skeleton pc block></Skeleton>
              <div class="divider-line"></div>
            </div>
          </div>
          <div class="mobile-skeleton">
            <div v-for="i in 6" :key="i">
              <Skeleton mobile block></Skeleton>
              <div class="divider-line"></div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- 课程资料 -->
    <div class="nav-content course-file">
      <div class="nav-content-item">
        <h2 class="title" v-if="navList[2].label" :id="navList[2].label">
          {{ $t(navList[2].label) }}
        </h2>
        <div class="title" v-else>
          <Skeleton pc></Skeleton>
        </div>
        <div class="course-outline-list" v-if="loaded">
          <template v-for="item in data.file" :key="item.id">
            <div class="course-outline-item item-row no-sub-list">
              <div class="title">
                <div class="name" :title="item.title">{{ item.title }}</div>
              </div>
              <div class="download_btn" @click="downloadFile(item)">
                <IconDownload />
                <span>{{ $t("btnText.download") }}</span>
              </div>
            </div>
          </template>
          <!-- 查看全部 -->
          <!-- <div class="show-all t-center">
            查看全部 <i class="iconfont icon-arrow-down"></i>
          </div> -->
        </div>
        <template v-else>
          <div class="pc-skeleton">
            <div v-for="i in 6" :key="i">
              <Skeleton pc block></Skeleton>
              <div class="divider-line"></div>
            </div>
          </div>
          <div class="mobile-skeleton">
            <div v-for="i in 6" :key="i">
              <Skeleton mobile block></Skeleton>
              <div class="divider-line"></div>
            </div>
          </div>
        </template>
      </div>
    </div>

    <!-- 立即报名 -->
    <div class="sign-up">
      <a-button
        type="primary"
        size="large"
        @click="gotoMobileFillApply"
        block
        >{{ $t("btnText.imed_apply") }}</a-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getCurrentInstance,
  inject,
  nextTick,
  onMounted,
  onUpdated,
  ref,
  watch,
} from "vue";
import { useRoute } from "vue-router";
import type { CourseView } from "../../../types/aviation";
import { LeftData, LeftDataCourseIntroduce } from "./data";
import { useRuntimeConfig } from "nuxt/app";
// import Right from "./Right.vue";

const props = defineProps<{
  data: CourseView;
}>();

const showCourseIndex = ref<any[]>([true]);
const showSubList = (item, index) => {
  if (showCourseIndex.value[index]) {
    showCourseIndex.value[index] = false;
  } else {
    showCourseIndex.value[index] = true;
  }
};

const loaded = inject("loaded");

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const route = useRoute();

const navPanelActiveId = ref();
const navList = ref([
  {
    value: 1,
    label: "content.aviation_detail.navList.label_1",
  },
  {
    value: 2,
    label: "content.aviation_detail.navList.label_2",
  },
  {
    value: 3,
    label: "content.aviation_detail.navList.label_3",
  },
]);

const setNavList = () => {
  navPanelActiveId.value = navList.value[0].value;
};

const navPanelItemClick = (item, index) => {
  onClickTabItem(item.label);
};
const onClickTabItem = (item: string) => {
  let dom = document.getElementById(item);
  let banner = document.querySelector(
    "#aviation-detail-banner"
  ) as HTMLDivElement;
  let nav = document.querySelector("#aviation-detail-nav") as HTMLDivElement;
  let header = document.querySelector("#app-header") as HTMLDivElement;
  let top =
    dom?.offsetTop! +
    banner.offsetHeight +
    header.offsetHeight -
    nav.offsetHeight;
  window.scrollTo({
    top,
    behavior: "smooth",
  });
};
// 下载文件
const downloadFile = (item: any) => {
  let a = document.createElement("a");
  a.download = item.title;
  a.href = item.file_url;
  a.target = "_blank";
  a.click();
  document.body.appendChild(a);
  document.body.removeChild(a);
};

const gotoMobileFillApply = () => {
  if (!props.data.list) return;
  sessionStorage.setItem("fill_apply_list", JSON.stringify(props.data.list));
  goto("/mobile/fillApply", { id: route.query.id });
};

watch(
  () => props.data,
  (newValue, oldValue) => {
    handleCourseDescriContent();
  },
  { deep: true }
);
const courseDescriContentRef = ref<HTMLElement | undefined>();
let isSetDescriContent = false;
const config = useRuntimeConfig();
const handleCourseDescriContent = () => {
  if (isSetDescriContent) return;
  nextTick(() => {
    let imgs = courseDescriContentRef.value?.querySelectorAll("img") || [];
    if (imgs && courseDescriContentRef.value) {
      imgs?.forEach((item) => {
        item.src = config.public.server_url + item.attributes._src.value;
      });
      isSetDescriContent = true;
    }
  });
};

onUpdated(() => {
  handleCourseDescriContent();
});

onMounted(() => {
  setTimeout(() => {
    setNavList();
  });
  window.addEventListener("scroll", bindWindowScrollFuc);
});

const bindWindowScrollFuc = () => {
  let scrollTop =
    window.pageYOffset ||
    document.body.scrollTop ||
    document.documentElement.scrollTop;
  let header = document.querySelector("#app-header") as HTMLElement;
  let banner = document.querySelector("#aviation-detail-banner") as HTMLElement;
  let nav = document.querySelector("#aviation-detail-nav") as HTMLElement;
  navList.value.forEach((item, index) => {
    let dom = document.getElementById(item.label) as HTMLElement;
    let domTop = dom?.offsetTop || 0;
    let top =
      domTop + header.offsetHeight + banner?.offsetHeight - nav?.offsetHeight;
    if (Math.ceil(scrollTop) >= top) {
      navPanelActiveId.value = item.value;
    }
  });
};
</script>

<style scoped>
@media screen and (max-width: 768px) {
  body {
    padding-bottom: 370px;
  }
}
</style>
<style scoped lang="less">
@import url("./media.less");
.aviation-right {
  display: none !important;
}
.download_btn {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #969696;
  cursor: pointer;
}
.sign-up {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 370px;
  box-sizing: border-box;
  padding: 0 82px;
  background-color: #fff;
  z-index: 9;
  border-top: 3px solid #e6edf2;
  .ant-btn {
    font-size: 72px !important;
    border-radius: 20px !important;
    height: 246px !important;
  }
}
.card > .divider-line {
  margin: 8px 0;
  margin-bottom: 0;
}
.show-all {
  font-size: 14px;
  color: #9daab2;
  cursor: pointer;
}

.navbar {
  position: sticky;
  top: 0;
  font-size: 16px;
  background-color: #fff;
  z-index: 9;
  .nav-item {
    position: relative;
    &.active {
      color: #3d88f2;
      &::before {
        content: "";
        width: 100%;
        height: 2px;
        background-color: #3d88f2;
        position: absolute;
        bottom: -2px;
        left: 0;
      }
    }
  }
}

.nav-content {
  &:first-of-type {
    .nav-content-item > .title {
      margin-top: 0;
    }
  }
  .nav-content-item > .title {
    position: relative;
    margin-top: 40px;
    margin-bottom: 14px;
    padding-left: 15px;
    font-size: 20px;
    color: #323232;
    font-weight: 700;
    color: #1677ff;
    font-family: "Udemy Sans", -apple-system, BlinkMacSystemFont, Roboto,
      "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol";
    &::before {
      content: "";
      position: absolute;
      height: 24px;
      width: 4px;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      // background-color: #323232;
      background-color: #1677ff;
    }
  }
  .course-outline-item {
    border-bottom: 1px solid #d3dce3;
  }
  .course-outline-list {
    font-size: 16px;
    color: #323232;
    .item-row {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        flex: 1;
        display: flex;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        span:first-child,
        .name {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          max-width: 100%;
        }
      }
      &.course-outline-sub-list-item {
        padding: 12px 24px;
        border-bottom: 1px solid #d3dce3;
        .price {
          flex-shrink: 0;
          white-space: nowrap;
        }
      }
    }
    .course-outline-item {
      background: #ebeff2;
      font-weight: 600;
      gap: 5px;
      &.no-sub-list {
        background-color: transparent;
        font-weight: normal;
      }
      &.show {
        &.course-outline-item {
          .collapse-svg {
            transform: rotate(-180deg);
          }
        }
        & + .course-outline-sub-list-outer {
          grid-template-rows: 1fr;
        }
      }
    }
    .collapse-svg {
      transition: all 0.3s;
    }
    .course-outline-sub-list-outer {
      min-height: 0;
      display: grid;
      grid-template-rows: 0fr;
      transition: all 0.3s;
      & > div {
        overflow: hidden;
      }
    }
  }
  .teacher-list {
    margin-bottom: 16px;
    .teacher-item {
      display: flex;
      gap: 16px;
      padding: 12px 16px;
      border-radius: 8px;
      border: 1px solid #ccd6de;
      font-size: 16px;
      img.logo {
        width: 56px;
        height: 56px;
      }
      .detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #323232;
        .desc {
          color: #969696;
        }
      }
      .iconfont {
        display: none;
      }
    }
  }
  .course-descri {
    color: #323232;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #ccd6de;
    .course-descri-title {
      font-weight: 600;
    }
  }
}

// mobile
@media screen and (max-width: 768px) {
  .sign-up {
    display: flex !important;
    align-items: center;
  }
  .navbar {
    margin-left: -82px;
    margin-right: -82px;
  }
  .teacher-introduce {
    .teacher-list {
      display: flex;
      white-space: nowrap;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 0;
      }
    }
    .teacher-item {
      display: flex;
      align-items: center;
      background: #f5f8fa;
      border-radius: 61px;
      padding: 41px;
      .detail {
        margin-left: 41px;
        margin-right: 82px;
        & > div {
          width: 400px;
        }
        .name {
          font-size: 82px;
          color: #172026;
        }
        .desc {
          font-size: 61px;
          color: #9daab2;
        }
      }
      .icon-arrow-right {
        color: #9daab2;
      }
    }
    .teacher-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      pointer-events: none;
      & > div {
        pointer-events: auto;
        z-index: 1000;
      }
      .teacher-modal-mask {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
      }
      .teacher-modal-content {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 2012px;
        background-color: #fff;
        border-radius: 164px 164px 0px 0px;
        display: flex;
        flex-direction: column;
        .close-icon {
          position: absolute;
          top: 82px;
          right: 82px;
          width: 123px;
          height: 123px;
        }
        .teacher-modal-content-inner {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .teacher-info-detail {
            padding: 123px 82px 164px 82px;
          }
        }
        .header-title {
          text-align: center;
          padding-top: 82px;
          font-size: 92px;
          color: #172026;
        }
        .teacher-item {
          padding: 0;
          background-color: #fff;
          img.logo {
            width: 246px;
            height: 246px;
          }
          .detail {
            margin-left: 61px;
            margin-right: 0;
            & > div {
              width: 100% !important;
            }
            .name {
              font-size: 92px;
            }
          }
        }
        .introduce {
          margin-top: 92px;
        }
        .footer {
          padding: 82px;
          padding-top: 41px;
          border-top: 3px solid #e6edf2;
          .ant-btn {
            height: 246px !important;
            font-size: 82px !important;
            border-radius: 61px !important;
          }
        }
      }
    }
  }
  .course-descri {
    border-radius: 20px !important;
    padding: 61px !important;
  }
  #aviation-detail-nav {
    :deep(.nav-panel) {
      background-color: transparent;
      border-top: 1px solid #d9e1e7;
      margin-left: 0;
      margin-right: 0;
    }
  }

  .course-outline-item {
    gap: 30px !important;
  }
  .course-file {
    .download_btn {
      span {
        display: none;
      }
    }
  }
}
</style>
